<template>
    <div class="productList">
            <ul style="list-style:none;">
                <li v-for="product in products"
                    @click="toDetail(product.id)">
                    <img :src="product.imgPath" alt="" width="200px">
                    <p>{{product.title}}</p>
                </li>
            </ul>
        </div>
  </template>
  
  <script>
  export default {
    name: 'ProductListView',
    data(){
        return {
            oldproducts : [
            
        {
            "id":100,
            "type": "【非自营】",
            "imgPath": "http://p0.jmstatic.com/product/004/879/4879610_std/4879610_350_350.jpg",
            "title": "迪奥小黑裙走珠香水女9ml 持久淡香 走珠设计易携带",
            "price": "26.5",
            "brand": "迪奥",
            "state":false,
            "count":1
        },
        {
            "id":101,
            "type": " 【非自营】",
            "imgPath": "http://p0.jmstatic.com/product/004/880/4880060_std/4880060_350_350.jpg",
            "title": "雅芳 雅芳小黑裙喷雾香水50ml女士经典花香持久淡香优雅",
            "price": "99",
            "brand": "雅芳",
            "state":true,
            "count":1
        },
        {
            "id":102,
            "type": "【非自营】",
            "imgPath": "http://p2.jmstatic.com/product/004/993/4993352_std/4993352_350_350.jpg",
            "title": "雅芳走珠香水三支装9ml*3便携易带淡雅清新淡香型滚珠女士淡香水",
            "price": "59",
            "brand": "雅芳",
            "state":true,
            "count":1
        },
        {
            "id":103,
            "type": "【非自营】",
            "imgPath": "http://p3.jmstatic.com/product/004/880/4880008_std/4880008_350_350.jpg",
            "title": "雅芳小红裙走珠香水9ml持久留香便携香水 正品",
            "price": "26.5",
            "brand": "雅芳",
            "state":true,
            "count":1
        },
        {
            "id":104,
            "type": "【非自营】",
            "imgPath": "http://p0.jmstatic.com/product/004/880/4880000_std/4880000_350_350.jpg",
            "title": "雅芳小金裙走珠香水9ml持久留香便携香水 正品",
            "price": "26.5",
            "brand": "雅芳",
            "state":true,
            "count":1
        }
       
    ],
            products:[]
            
        }
    },
    created(){
      // 1.接受上一个路由组件传入的参数
      let brand = this.$route.query.queryKey
      // 2.数据筛选
      this.products=this.oldproducts.filter(item =>{
        return item.brand == brand
      })
    },
    methods:{
      toDetail(id) {
        //路由组件跳转并且传参
         this.$router.push({ path: '/productDetail', query: { id } })
      }
    }
  }
  </script>
  <style>
    ul{
      list-style: none;
    }
    li{
      float:left;
      margin:20px;
      width:220px
    }
  </style>